<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增课程</title>
<!--    导入-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #dv1{
            width: 50%;
            float: left;
        }
        #dv1 img{
            width: 100%;
            height: 310px;
        }
        #dv2{
            float: right;
            width: 40%;
            text-align: center;
            align-items: center;
        }
        label,input,button{
            clear: both;

            margin-top: 20px;
            padding: 10px;
            font-size: 18px;

        }
    </style>
</head>
<body>
<div id="dv1">
    <img src="imgs/mv01.jpg">
</div>
<fieldset id="dv2">
    <legend>新增课程</legend>
    <form id="fm1">
        <div>
            <label>名称：</label><input name="name">
        </div>
        <div>
            <label>周期：</label>
            <input type="number" name="weeks" >周
        </div>
        <div>
            <label>讲师：</label><input type="text" name="teacher">
        </div>
        <div><button type="button" onclick="add()">新增课程</button></div>

    </form>
</fieldset>
<script>
    function add(){
        //页面调用接口 Ajax
        $.post("/api/course/save.do",$("#fm1").serialize(),function (res){
            if(res.code==200){
                //成功
                alert("OK");
            }else {
                alert("失败");
            }
        })
    }
</script>
</body>
</html>